import React, { Component,createRef } from 'react'
import { Form, Input, Button, Card,message } from 'antd';
import E from 'wangeditor'
import { addArt } from '@api'
const layout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 20,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 10,
    span: 14,
  },
};

export default class ArtAdd extends Component {
	constructor() {
	   super();
		 this.state  = {
			 editor:null
		 }
		 this.editorWrap = createRef()
	}
  render() {
    return (
      <Card title="添加文章">
				<Form
				      {...layout}
				      name="basic"
				      onFinish={this.submitForm}
				    >
				      <Form.Item
				        label="文章标题"
				        name="title"
				        rules={[
				          {
				            required: true,
				            message: '请填写文章标题!',
				          },
				        ]}
				      >
				        <Input placeholder="文章标题"/>
				      </Form.Item>
				
				      <Form.Item
				        label="作者"
				        name="author"
				        rules={[
				          {
				            required: true,
				            message: '请填写作者!',
				          },
				        ]}
				      >
				        <Input  placeholder="请输入作者"/>
				      </Form.Item>
							<Form.Item
							  label="简介"
							  name="desc"
							  rules={[
							    {
							      required: false,
							      message: '',
							    },
							  ]}
							>
							  <Input.TextArea  placeholder="请输入描述"/>
							</Form.Item>
							<Form.Item
							  label="文章详情"
							  name="content"
			
							>
							  <div id="editor" ref={this.editorWrap}/>
							</Form.Item>
				      <Form.Item {...tailLayout}>
				        <Button type="primary" htmlType="submit">
				          提交
				        </Button>
				      </Form.Item>
				    </Form>
			</Card>	
    )
  }
	componentDidMount(){
		// 初始化富文本
		console.log(this.editorWrap)
		let editor =  new E(this.editorWrap.current);
		this.setState({
			editor
		},()=>{
			this.state.editor.create();
		})
	}
	submitForm =(value) =>{
	// 提交表单
		let formValue = {
			...value,
			content:this.state.editor.txt.html(),
			count:0,
			createAt:Date.now()
		}
		addArt(formValue).then(res=>{
			if(res.data.code === '0' ){
				message.success(res.data.msg,1,()=>{
					this.props.history.go(0)
				})
			}
		})
	}
}
